<template>
  <el-row>
    <el-col :span="24"
            id="headerTitle">
      <p>
        <el-tooltip class="item"
                    effect="dark"
                    content="返回"
                    placement="top">
          <span class="el-icon-back"
                id="backIconStyle"
                style="padding-top: 4px;"
                @click="goBack"></span>
        </el-tooltip>
        &nbsp;&nbsp;业务系统申请
      </p>
    </el-col>
    <el-col :span="24"
            class="info-style">
      <el-form :model="form">
        <el-col :span="6">
          <el-form-item label="单位名称"
                        label-width="90px">
            <el-input v-model="form.unit_name"
                      :disabled="true"></el-input>
          </el-form-item>
        </el-col>
      </el-form>
    </el-col>
    <el-col :span="24"
            class="user-info-box">
      <p class="user-info-style">系统联系人员:马景涛&nbsp;&nbsp;18767117009 <span class="email-style">邮箱:1325128281@qq.com</span></p>

    </el-col>
    <el-col :span="24"
            class="container">
      <el-table :data="tableData"
                height="600px"
                class="check-item-list"
                :header-cell-style="{background:'#f5f5f5'}">
        <el-table-column type="index"
                         align="center"
                         width="70px"
                         label="序号">
        </el-table-column>
        <el-table-column label="系统编号"
                         prop="system_no"
                         show-overflow-tooltip
                         align="center">
        </el-table-column>
        <el-table-column label="系统名称"
                         prop="system_name"
                         show-overflow-tooltip
                         align="center">
        </el-table-column>
        <el-table-column label="状态"
                         prop=""
                         show-overflow-tooltip
                         align="center">
          <!-- 2：审核中，3：通过，4：驳回，0表示未申请 
                          -->
          <template slot-scope="scope">
            <span v-if="scope.row.status==0">未申请</span>
            <span v-else-if="scope.row.status==2">审核中</span>
            <span v-else-if="scope.row.status==3">通过</span>
            <span v-else-if="scope.row.status==4">驳回</span>
          </template>
        </el-table-column>
        <el-table-column label="授权申请"
                         prop="sys_name"
                         show-overflow-tooltip
                         align="center">
          <template slot-scope="scope">
            <el-button :type="scope.row.status==0?'primary':'info'"
                       :disabled="scope.row.status==0?false:true"
                       @click="onAppAuth(scope.row)"
                       size="mini"> 申请</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
    <el-col :span='24'
            class="bottom-style">
      <el-pagination @current-change="handlePageChange"
                     @size-change="handleSizeChange"
                     :current-page="requestParams.page"
                     :page-size="requestParams.page_size"
                     layout="total,sizes,prev, pager, next, jumper"
                     background
                     :total="total"
                     align="center">
      </el-pagination>
    </el-col>
  </el-row>
</template>

<script>
import { MyCompanyApi } from '@/services/WorkBench';
export default {
  data () {
    return {
      tableData: [],
      form: {
        unit_name: '',
        userName: '',
        phone: '',
        email: ''
      },
      total: 0,
      requestParams: {
        id: '',//账号id或单位id
        // system_name: '',//系统名称（支持模糊匹配）
        auth_sys_type: 2,//授权系统类型（1：账号授权系统，2：单位授权系统），与参数id保持一致
        is_page: 1,
        page: 1,
        page_size: 10
      }
    }
  },
  methods: {
    goBack () {//返回登录页面
      if (this.$route.query.topPage == '平台里跳转') {
        this.$router.push({ path: '/workbenchMyUnit', query: { topPage: '平台里跳转' } })
      } else {
        this.$router.push({ path: '/workbenchMyUnit' })
      }
    },
    handlePageChange (val) {
      this.requestParams.page = val;
      this.getSysList()
    },
    handleSizeChange (val) {
      this.requestParams.page_size = val;
      this.handlePageChange(1)
    },
    onAppAuth (row) {
      this.$confirm('确定进行授权申请?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        left: true
      }).then(() => {
        MyCompanyApi.appliAuth({
          data: {
            org_id: this.$route.query.company_id,
            sid: row.sid,
            system_no: row.system_no,
            type: 2
          }
        }).then((res) => {
          if (res.code == 0) {
            this.$message.success('操作成功!请联系管理员对您申请的系统进行审核的操作')
            // this.handlePageChange(1)//刷新
            this.getSysList();//刷新
          }
        }).catch((error) => {
          console.log(error)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });

    },
    getSysList () {//我的单位-业务系统列表
      MyCompanyApi.getSysList({
        params: {
          ...this.requestParams
        }
      }).then((res) => {
        this.tableData = res.data.list;
        this.total = res.data.total_count;
      }).catch((error) => {
        console.log(error)
      })
    }
  },
  created () {
    this.requestParams.id = this.$route.query.company_id;
    this.form.unit_name = this.$route.query.company_name;
    // form: {
    // unit_name: '',
    // userName: '',
    // phone: '',
    // email: ''
    // },
    this.form.userName = JSON.parse(localStorage.userInfo).user_name;
    this.form.phone = JSON.parse(localStorage.userInfo).phone;
    this.form.email = JSON.parse(localStorage.userInfo).email;
    this.getSysList();//我的单位-业务系统列表
  }
}
</script>

<style lang="scss" scoped>
.user-info-box {
  display: flex;
  flex-direction: row;
  padding-left: 20px;
  padding-right: 20px;
}
.email-style {
  margin-left: 20px;
}
.user-info-style {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background-color: #409eff;
  color: white;
}
.info-style {
  padding-right: 20px;
}
.bottom-style {
  padding-bottom: 20px;
}
.detail-style {
  padding-left: 20px;
}
#headerTitle p {
  padding-bottom: 20px;
  margin-bottom: 20px;
  padding-left: 20px;
  margin-top: 20px;
  border-bottom: 1px solid #d9d9d9;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  padding-right: 20px;
}
.container {
  padding: 20px;
  padding-top: 0px;
}
</style>